<template>
  <div id="bankuai_content">
    <el-main>
        <el-table :data="tableData" border style="width: 100%;" class="box-table" :header-cell-style='headerStyle'
          :row-style='rowStyle' :cell-style="cellStyle" :cell-class-name='cellClassName'>
            <el-table-column v-for="value,index in dateList" :key="index" width="130" align="center" text-align=center>
                <template slot="header"  style="font-size: 15px" >{{value}}</template>
                <template slot-scope="scope" >
                  <div>{{tableData[scope.$index][dateList[index]]['industry']}}</div>
                  <div>{{tableData[scope.$index][dateList[index]]['bankuai_mt']}}</div>
                </template>
            </el-table-column>
        </el-table>
    </el-main>
  </div>
</template>

<script>

import json_data from '../Utils/api.js';
let {localData,key_names } = json_data()
console.log("板块")
console.log(key_names)

export default {
  name: "YYBanKuai",
  components: {
  },
  props: ['type'],
  data() {
    return {
      chartdata:null,
      dateList:[],
      tableData: [],
      headerStyle:{
          'font-weight':'normal',
          'font-size':'12px',
          'height':'40px'
      },
      rowStyle:{
          'font-weight':'normal',
          'font-size':'10px',
      }
    }
  },
  beforeMount() {
    this.getUserInfo(this.type);
  },
  methods: {
    GetChinese(strValue) { // eslint-disable-line
      if (strValue !== null && strValue !== '') {
        const reg = /[\u4e00-\u9fa5]/g;
        return strValue.match(reg).join('');
      }
      return '';
    },
    cellStyle({rowIndex, columnIndex}) {//根据测试结果动态调整单元格样式，成功-绿色，失败-红色，不支持-黄色
      let color = "#555555"
      if (rowIndex>=0) {
          // let currentColumn = columnIndex
          // let lastColumn = columnIndex-1
          // let lastLastColumn = columnIndex-2
          // color = this.tableData[columnIndex][rowIndex]['color']
          color=this.tableData[rowIndex][this.dateList[columnIndex]]['color']

          // if (columnIndex ==5) {
          //   let percent = this.tableData[rowIndex]["percent"]
          //   let percent_n=Number(percent.split('%')[0])
          //   if (percent_n > 0 ) {
          //     color="red"
          //   }else{
          //     color="green"
          //   }
          // }
          // if (columnIndex ==7) {
          //     let net_mf_amount = this.tableData[rowIndex]["net_mf_amount"]
          //     let net_mf_amount_n=Number(net_mf_amount.split('万')[0])
          //     if (net_mf_amount_n > 0 ) {
          //        color="red"
          //     }else{
          //        color="green"
          //     }
          // }  
      }

      let aa ={
          'height':'70px',
          'color':color,
          'font-size':'12px',
          'text-align':'center'
      }

      return aa          
    },
    cellClassName({row,rowIndex,columnIndex}) {
      let date = this.dateList[columnIndex]
      let aa = JSON.parse(JSON.stringify(row))
      let bb = '"'+JSON.stringify(aa[date])+'"'
      // "\"{\"industry\":\"景点及旅游\",\"bankuai_mt\":1.78}\""
      var cc = String(bb.split(',',3)[0].split('":"',2)[1])
      cc = cc.substr(0,cc.length-1)
      if (cc == undefined) {
        cc = "xx"
      }
      return cc
    },
    
    getUserInfo(type) {
      type="bankuai"
      var jsonO=localData[type]
      this.dateList=jsonO.dateList
      this.tableData=jsonO.data
    },

  }
}
</script>

<style>
.aa {
    background-color: rgb(255, 159, 64,0.3);
}
.bb {
    background-color: #F56C6C;
}
.航空 {
    background-color: rgb(255, 159, 64,1);
}
.化纤 {
    background-color: rgb(255, 205, 86,1);
}
.cc {
    background-color: rgb(75, 192, 192,1);
}
.医疗保健 {
    background-color: rgb(54, 162, 235,1);
}
.新型电力 {
    background-color: rgb(153, 102, 255,1);
}
.塑料 {
    background-color: rgb(201, 203, 207,1);
}
.焦炭加工 {
    background-color: #EE9A49;
}
.白酒 {
    background-color: #C0C4CC;
}
.其他建材 {
    background-color: #DA70D6;
}
.影视音像 {
    background-color: #CAE1FF;
}
.食品 {
    background-color: #008B8B;
}
.元器件 {
    background-color: #EE6A50;
}
.农药化肥 {
    background-color: #FF82AB;
}

.特种钢 {
    background-color: #9AC0CD;
}
.水力发电{
    background-color: #90EE90;
}
.火力发电{
    background-color: #FFB5C5;
}
.中成药{
    background-color: #EEEEE0;
}
.互联网{
    background-color: #9370DB;
}
.家居用品{
   background-color: #F5DEB3;
}

.el-table tbody tr {
  pointer-events:none;
}
.el-main {
    padding: 0px !important;
}
</style>
